<!-- config -->
<template>
  <div class="margin-top">
    <el-form :model="form" label-position="left" label-width="100px">
      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="Logo图片:">
            <upload-image
              :width="270"
              :height="100"
              v-model="form.logo"
            ></upload-image>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="QQ:">
            <el-input type="text" v-model="form.qq"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="头像:">
            <upload-image
              :width="150"
              :height="150"
              v-model="form.avatar"
            ></upload-image>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="网易云:">
            <el-input type="text" v-model="form.netease_cloud"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="个性签名:">
            <el-input
              :autosize="{ minRows: 4, maxRows: 4 }"
              type="textarea"
              v-model="form.quotes"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="哔哩哔哩:">
            <el-input type="text" v-model="form.bilibili"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="呢称:">
            <el-input type="text" v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="gitee:">
            <el-input type="text" v-model="form.gitee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="10">
          <el-form-item label="背景图片:">
            <el-input type="text" v-model="form.bgimg"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- button -->
      <el-row class="margin-top">
        <el-col :span="10" class="flex justify-center">
          <el-button type="success" @click="handleSave">保存</el-button>
          <el-button type="info" @click="handleCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getInfo } from "@/apiv/config";
import { configSave } from "@/api/user";
import UploadImage from "@/components/UploadImage/index";
export default {
  components: {
    UploadImage,
  },
  data() {
    return {
      uploadUrl: "http://localhost:3000/api/v1/upload/img",
      form: {
        id: 0,
        logo: "",
        avatar: "",
        name: "",
        quotes: "",
        qq: "",
        netease_cloud: "",
        bilibili: "",
        gitee: "",
        bgimg: "",
      },
    };
  },
  mounted() {
    this.handleData();
  },
  methods: {
    handleData() {
      getInfo().then((res) => {
        this.form = res.data;
      });
    },
    handleSave() {
      configSave(this.form).then((res) => {
        this.$message.success(res.msg);
      });
    },
    handleCancel() {
      this.handleData();
    },
  },
};
</script>
<style lang='scss' scoped>
</style>